/* eslint-disable react/jsx-key */
import DragModal from '@/components/DragModal';
import { Add, Join } from '@/components/DragModal/formdoms';
import Header from '@/components/Header';
import Weather from '@/components/Weather';
import { doFetch } from '@/utils/doFetch';
import { MessageOutlined, SettingFilled } from '@ant-design/icons';
import { history, Outlet, useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import {
  Avatar,
  Badge,
  Button,
  ConfigProvider,
  Drawer,
  Dropdown,
  List,
  message,
  notification,
  Popconfirm,
  Segmented,
  Skeleton,
  Tooltip,
  Typography,
} from 'antd';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { useEffect, useMemo, useRef, useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import io from 'socket.io-client';
import { getFetch } from '../utils/doFetch';
import styles from './index.less';

const { Paragraph } = Typography;

dayjs.locale('zh-cn');
const gaodekey = { key: 'ef1aace83eafd3eab2d42e013b456bae' };
const socket = io(REACT_APP_URL, { query: { id: localStorage.getItem('ID') } });

function difftime(start, end) {
  const diffInMs = start.diff(end);
  if (diffInMs < 60 * 60 * 1000) {
    // 时间差小于 1 小时，转为分钟
    const diffInMinutes = Math.round(diffInMs / (60 * 1000));
    return diffInMinutes + '分钟前';
  } else {
    // 时间差大于等于 1 小时，继续判断是否超过 24 小时
    const diffInHours = Math.round(diffInMs / (60 * 60 * 1000));
    if (diffInHours >= 24) {
      // 时间差超过 24 小时，转为天
      const diffInDays = Math.round(diffInHours / 24);
      return diffInDays + '天前';
    } else {
      // 时间差在 1 小时到 24 小时之间，直接输出小时数
      return diffInHours + '小时前';
    }
  }
}



function Welcome(props) {
  const {
    initialState: { currentUser, fetchUserInfo },
    setInitialState,
  } = useModel('@@initialState');

  let scrollRef = useRef();
  const [modal, setmodal] = useState({
    open: false,
  });
  const [ips, setips] = useState({});
  const [dot, setdot] = useState(false);
  const [drawer, setdrawer] = useState({
    open: false,
  });

  const items = useMemo(() => {
    return currentUser?.org_id
      ? [
          {
            key: '4',
            danger: true,
            label: '退出登录',
          },
        ]
      : [
          {
            key: '1',
            label: <a>创建组织</a>,
          },
          {
            key: '2',
            label: <a>加入组织</a>,
          },
          {
            key: '4',
            danger: true,
            label: '退出登录',
          },
        ];
  }, [currentUser?.org_id]);

  const { run, loading } = useRequest(
    () => {
      return fetchUserInfo();
    },
    {
      manual: true,
      onSuccess: (res) => {
        setInitialState((s) => ({
          ...s,
          currentUser: res,
        }));
      },
    },
  );

  const [isread, setisread] = useState(0);
  const [count, setcount] = useState({
    noread: 0,
    readed: 0,
  });

  const messagelist = useRequest(
    async () => {
      let res = await getFetch({
        url: '/webtool/v1/notice',
        params: { isread },
      });
      return res?.data ?? [];
    },
    {
      debounceWait: 300,
      refreshDeps: [drawer?.open, isread],
      onSuccess: (res) => {
        if(!res) return;
        if (isread === 0) {
          setdot(res?.length > 0)
          setcount((s) => ({
            ...s,
            noread: res?.length,
          }));
        } else {
          setcount((s) => ({
            ...s,
            readed: res?.length,
          }));
        }
      },
    },
  );

  const weather = useRequest(
    async () => {
      const url = new URL('https://restapi.amap.com/v3/ip');
      url.search = new URLSearchParams(gaodekey).toString();
      let ip = await fetch(url);
      ip = await ip.json();
      setips(ip); //设置ip
      const params = { ...gaodekey, city: ip.adcode, extensions: 'base' };
      const urls = new URL('https://restapi.amap.com/v3/weather/weatherInfo');
      urls.search = new URLSearchParams(params).toString();

      let wea = await fetch(urls);
      wea = await wea.json();
      return {
        ...ip,
        ...(wea?.lives?.[0] ?? {}),
      };
    },
    {
      debounceWait: 300,
    },
  );

  const tomorrow = useRequest(
    async () => {
      if (!ips?.adcode) {
        return {};
      }
      const params = { ...gaodekey, city: ips.adcode, extensions: 'all' };
      const urls = new URL('https://restapi.amap.com/v3/weather/weatherInfo');
      urls.search = new URLSearchParams(params).toString();

      let wea = await fetch(urls);
      wea = await wea.json();
      let casts = wea?.forecasts?.[0]?.casts ?? {};
      let tomorrowres =
        casts?.filter((it) => it.date === dayjs().add(1, 'day').format('YYYY-MM-DD'))?.[0] ?? {};

      return {
        ...tomorrowres,
      };
    },
    {
      debounceWait: 300,
      refreshDeps: [ips?.adcode],
    },
  );

  useEffect(() => {
    socket.connect();

    socket.on('message', (data) => {
      let div = document.createElement('div');
      div.innerHTML = data?.reply ?? '';
      const strings =
        div.innerText.length > 25 ? `${div.innerText.substring(0, 25)}...` : div.innerText;

      notification.info({
        message: (
          <div className="spread">
            <b>{data?.title}</b>
          </div>
        ),
        duration: 0,
        description: (
          <span>
            发送人:
            {data?.otherinfo?.user_name}
            &nbsp;&nbsp;任务：
            <b
              style={{ color: 'rgb(24, 144, 255)', cursor: 'pointer' }}
              onClick={() => {
                if (location.hash?.indexOf(`/welcome/project/${data?.project_id}`) === -1) {
                  history.push(`/welcome/project/${data?.project_id}`);
                }
                setInitialState((s) => ({
                  ...s,
                  curitem: data,
                }));
              }}
            >
              {data?.mission_name}
            </b>
            {data?.deadline && (
              <span style={{ paddingLeft: 8 }}>
                于
                <b style={{ color: '#ff4800', paddingLeft: 8 }}>
                  {dayjs(data?.deadline).format('MM-DD')}
                </b>
                前截止
              </span>
            )}
            {data?.reply && (
              <span style={{ paddingLeft: 8 }}>
                回复
                <b style={{ color: '#000000', paddingLeft: 8 }}>{strings}</b>
              </span>
            )}
          </span>
        ),
        placement: 'bottomRight',
      });
      messagelist?.refresh();
    });

    socket.on('onlineUsers', (data) => {
      setInitialState((s) => {
        const a = data,
          b = s.activeUserIdList;
        if (a.length === b.length && a.sort().toString() === b.sort().toString())
          return {
            ...s,
          };
        else
          return {
            ...s,
            activeUserIdList: data,
          };
      });
    });

    return () => {
      // 关闭 WebSocket 连接
      socket.disconnect();
    };
  }, []);

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          sizeUnit: 3,
        },
      }}
      locale={zhCN}
    >
      <div className={styles.homepage}>
        <DragModal
          {...modal}
          onCancel={() => {
            setmodal((s) => ({
              ...s,
              open: false,
            }));
          }}
        >
          {modal?.title === '创建组织' && (
            <Add
              refresh={() => {
                run();
                setmodal((s) => ({
                  ...s,
                  open: false,
                }));
              }}
            />
          )}
          {modal?.title === '加入组织' && (
            <Join
              refresh={() => {
                run();
                setmodal((s) => ({
                  ...s,
                  open: false,
                }));
              }}
            />
          )}
        </DragModal>

        <Drawer
          {...drawer}
          closable={false}
          maskStyle={{
            backgroundColor: 'transparent',
          }}
          onClose={() => {
            setdrawer((s) => ({
              ...s,
              open: false,
            }));
          }}
          extra={
            <Segmented
              onChange={(val) => {
                setisread(val);
              }}
              options={[
                {
                  label: (
                    <span className="center">
                      未读
                      {count?.noread !== 0 && (
                        <b
                          className="badge"
                          style={{
                            transform: isread === 0 ? 'scale(1)' : 'scale(0)',
                            padding: isread === 0 ? '0 6px' : '0px',
                            marginLeft: isread === 0 ? '6px' : '-6px',
                            transition: 'all 0.4s',
                            transitionDelay: '0.2s',
                          }}
                        >
                          {count?.noread}
                        </b>
                      )}
                    </span>
                  ),
                  value: 0,
                },
                {
                  label: (
                    <span className="center">
                      已读
                      {count?.readed !== 0 && (
                        <b
                          className="badge"
                          style={{
                            transform: isread === 1 ? 'scale(1)' : 'scale(0)',
                            padding: isread === 1 ? '0 6px' : '0px',
                            marginLeft: isread === 1 ? '6px' : '-10px',
                            transition: 'all 0.4s',
                            transitionDelay: '0.2s',
                          }}
                        >
                          {count?.readed}
                        </b>
                      )}
                    </span>
                  ),
                  value: 1,
                },
              ]}
            />
          }
        >
          <List
            loading={messagelist?.loading}
            itemLayout="horizontal"
            dataSource={messagelist?.data}
            renderItem={(item) => {
              let div = document.createElement('div');
              div.innerHTML = item?.reply;
              const strings =
                div.innerText.length > 25 ? `${div.innerText.substring(0, 25)}...` : div.innerText;
              return (
                <List.Item
                  actions={[
                    <span style={{fontSize:12}}>
                      {difftime(dayjs(), dayjs(item.created_at))}
                    </span>,
                    <a
                      key="list-loadmore-edit"
                      style={{ color: item.title === '你有新的任务' ? '#ff4600' : '#1890ff' }}
                      onClick={async () => {
                        if (location.hash?.indexOf(`/welcome/project/${item?.project_id}`) === -1) {
                          history.push(`/welcome/project/${item?.project_id}`);
                        }
                        await setInitialState((s) => ({
                          ...s,
                          curitem: item,
                        }));
                        await setdrawer((s) => ({
                          ...s,
                          open: false,
                        }));
                        //转为已读
                        let res = await doFetch({
                          url: `/webtool/v1/notice/${item?.id}`,
                          params: { isread: true },
                          method: 'PUT',
                        });
                        if (res?.code === 0) {
                          messagelist?.refresh();
                        }
                      }}
                    >
                      查看
                    </a>,
                  ]}
                >
                  <Skeleton avatar title={false} loading={item.loading} active>
                    <List.Item.Meta
                      avatar={
                        <Tooltip title={item?.other_user?.user_name}>
                          <Badge dot={isread === 0}>
                            <Avatar src={item?.other_user?.head_url || null}>
                              {item?.other_user?.head_url || item?.other_user?.user_name.charAt(0)}
                            </Avatar>
                          </Badge>
                        </Tooltip>
                      }
                      title={
                        item.title === '你有新的任务' ? (
                          <b>
                            <a style={{ color: '#ff4600' }}>任务:{item.mission_name}</a>
                          </b>
                        ) : item.title === '你有新的回复' ? (
                          <b>
                            <a>回复:{item.mission_name}</a>
                          </b>
                        ) : null
                      }
                    />
                    <div>
                      {strings ||
                        (item?.deadline && (
                          <span style={{ paddingLeft: 8 }}>
                            <a>{dayjs(item?.deadline).format('YYYY年MM月DD日')}</a>
                            前截止
                          </span>
                        ))}
                    </div>
                  </Skeleton>
                </List.Item>
              );
            }}
          />
        </Drawer>

        <div className={styles.header} id="head">
          <div className="center">
            <Header currentUser={currentUser} run={run}></Header>
            <div className="columns" style={{ paddingLeft: 12 }}>
              <Paragraph
                className="no-outline"
                style={{ color: '#000000', fontWeight: 'bolder', fontSize: 15 }}
                editable={{
                  onChange: async (value) => {
                    let res = await doFetch({
                      url: '/webtool/v1/user/' + currentUser?.id,
                      params: {
                        user_name: value,
                      },
                      method: 'PUT',
                    });
                    if (res.code === 0) {
                      run();
                    }
                  },
                }}
              >
                {currentUser?.user_name}
              </Paragraph>
              {currentUser?.org_id && (
                <div
                  style={{ fontSize: 12, display: 'flex', alignItems: 'baseline', marginRight: 20 }}
                >
                  <div style={{ flex: 1 }} className="oneline">
                    {currentUser?.org_name}
                  </div>
                  <Paragraph
                    copyable={{
                      text: currentUser?.org_join_key,
                      icon: <a>组织代码</a>,
                      tooltips: '复制组织代码',
                    }}
                    style={{ margin: 0, fontSize: 12 }}
                  ></Paragraph>
                  <Popconfirm
                    title={`是否退出?`}
                    placement="bottomRight"
                    description="退出后将无法查看当前组织的小组"
                    onConfirm={() => {
                      doFetch({
                        url: `/webtool/v1/user/${currentUser?.id}`,
                        params: { org_id: null },
                        method: 'PUT',
                      }).then((res) => {
                        if (res?.code === 0) {
                          message.success('退出成功');
                          history.push('/welcome/homepage');
                          run();
                        }
                      });
                    }}
                  >
                    <a style={{ paddingLeft: 6, color: '#ff4800', cursor: 'pointer' }}>退出组织</a>
                  </Popconfirm>
                </div>
              )}
            </div>
          </div>
          <div className="center" style={{ gap: 12 }}>
            <Weather
              weather={[
                {
                  text: '现在',
                  value: weather?.data?.weather,
                },
                {
                  text: '明天',
                  value: tomorrow?.data?.dayweather,
                },
              ]}
            />
            <Badge dot={dot}>
              <div
                className="sorts"
                style={{ height: 40, width: 40 }}
                onClick={() => {
                  setdrawer((s) => ({
                    ...s,
                    open: true,
                    width: 600,
                    title: '消息中心',
                  }));
                }}
              >
                <MessageOutlined
                  style={{ color: dot ? '#ff4800' : 'rgb(24, 144, 255)', fontSize: 16 }}
                />
              </div>
            </Badge>

            <Dropdown
              menu={{
                items,
                onClick: ({ item, key, keyPath, domEvent }) => {
                  switch (key) {
                    case '1':
                      setmodal((s) => ({
                        ...s,
                        open: true,
                        title: '创建组织',
                      }));
                      break;
                    case '2':
                      setmodal((s) => ({
                        ...s,
                        open: true,
                        title: '加入组织',
                      }));
                      break;
                    case '4':
                      socket.disconnect();
                      localStorage.removeItem('TOKENES');
                      history.push('/user/login');
                      break;
                    default:
                      break;
                  }
                },
              }}
              trigger="hover"
              getPopupContainer={() => document.getElementById('head')}
            >
              <Button
                size="large"
                style={{ backgroundColor: 'rgba(255,255,255,0.25)', flexShrink: 0 }}
                icon={<SettingFilled />}
              ></Button>
            </Dropdown>
          </div>
        </div>
        <div style={{ flex: 1, overflow: 'visible', paddingBottom: 12 }}>
          <Scrollbars
            thumbMinSize={10}
            autoHide
            style={{
              width: '100%',
              height: '100%',
            }}
            hideTracksWhenNotNeeded
            ref={scrollRef}
          >
            <div style={{ padding: 12, paddingTop: 0 }}>
              <Outlet context={{ prop: 'a' }} />
            </div>
          </Scrollbars>
        </div>
      </div>
    </ConfigProvider>
  );
}

export default Welcome;
